<template>
<div>
  <ul class="flex justify-between flex-wrap">
    <li
      v-for="(item, index) in list"
      :key="index"
      class="relative flex justify-center items-center w-232 h-82 rounded-xl box-border tabBackground c2cColor"
      @click="itemClick(item)"
      :class="{'active': value === item.title}"
    >
      <img
          v-show="value === item.title"
          class="absolute top-0 right-0 w-full h-full"
          src="~@/assets/image/c2c/Group317.png" alt=""
      >
      {{ item.title }}
    </li>
  </ul>
</div>
</template>

<script>

export default {
  name: "SelectItem",
  props: ['list', 'value'],
  methods: {
    itemClick(data) {
      console.log(data);
      this.$emit('select', data);
    }
  }
}
</script>

<style lang="scss" scoped>
li {
  margin-bottom: 30px;
}

.active {
  border: 1px solid #1D91FF;
}
</style>
